{% extends "subpage/base.html" %}
{% block styles %}
    <style>
        body {
            background: #ecf0f5;
        }

        .outer-box {
            width: 1200px;
            margin: 0 auto;
        }

        .statistic-item {
            min-height: 400px;
            border: 1px solid #cccccc;
            background: #FFFFFF;
            border-radius: 5px;
        }

        .statistics-list .row:first-child {
            margin-bottom: 30px;
        }

        .statistics-list .row:nth-child(2) {
            padding: 0 12px 0 30px;
        }

        .statistics-list .row:first-child .statistic-item:first-child {
            margin: 0 30px;
        }

        .statistics-list .row:first-child .statistic-item:last-child {
            margin-left: 30px;
        }

        .statistic-item:
        .statistics-list .row:last-child {
            margin-top: 20px;
        }

        /*滑动开关*/
        .switch-box {
            overflow: hidden;
            line-height: 31px;
            margin-top: 5px;
        }

        .onoffswitch {
            position: relative;
            width: 70px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .onoffswitch-checkbox {
            display: none;
        }

        .onoffswitch-label {
            display: block;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid #999999;
            border-radius: 23px;
            position: relative;
        }

        .onoffswitch-inner {
            display: block;
            width: 200%;
            margin-left: -100%;
            transition: margin 0.3s ease-in 0s;
        }

        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 22px;
            padding: 0;
            line-height: 22px;
            font-size: 14px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
        }

        .onoffswitch-inner:before {
            content: "开";
            padding-left: 10px;
            background-color: #34A7C1;
            color: #FFFFFF;
        }

        .onoffswitch-inner:after {
            content: "关";
            padding-right: 10px;
            background-color: #EEEEEE;
            color: #999999;
            text-align: right;
        }

        .onoffswitch-switch {
            display: block;
            width: 20px;
            margin: 1px;
            background: #FFFFFF;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 44px;
            border: 2px solid #999999;
            border-radius: 50%;
            transition: all 0.3s ease-in 0s;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
            right: 0;
        }
    </style>
{% endblock %}
{% block scripts %}
    <script type="text/javascript" src="{{ url_for("static",filename="extra/echarts.js") }}"></script>
{% endblock %}


{% block daily_report %}
    <div class="statistics-list clearfix">
        <div class="row">
            <div class="col-lg-5 col-xs-10 col-xs-offset-1 statistic-item">
                <h4 class="pull-left">
                    <b>
                        本月网络事件种类比例
                    </b>
                </h4>
                <div class="switch-box pull-right">
                    <span class="pull-left">自动刷新：</span>
                    <div class="onoffswitch pull-left">
                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch1"/>
                        <label class="onoffswitch-label" for="myonoffswitch1">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
                <div id="netevent-echart" style="width: 100%;height: 360px;padding-top: 20px;clear: both"></div>
            </div>
            <div class="col-lg-6 col-xs-10 col-xs-offset-1 statistic-item">
                <h4 class="pull-left">
                    <b>
                        7天带宽趋势
                    </b>
                </h4>
                <div class="switch-box pull-right">
                    <span class="pull-left">自动刷新：</span>
                    <div class="onoffswitch pull-left">
                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch2"/>
                        <label class="onoffswitch-label" for="myonoffswitch2">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
                <div id="bandWidth-echart" style="width: 100%;height: 360px;padding-top: 20px;clear: both;">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-xs-10 statistic-item">
                <h4 class="pull-left">
                    <b>
                        本月三线事件数量趋势
                    </b>
                </h4>
                <div class="switch-box pull-right">
                    <span class="pull-left">自动刷新：</span>
                    <div class="onoffswitch pull-left">
                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch3"/>
                        <label class="onoffswitch-label" for="myonoffswitch3">
                            <span class="onoffswitch-inner"></span>
                            <span class="onoffswitch-switch"></span>
                        </label>
                    </div>
                </div>
                <div id="eventTotal_echart" style="width: 100%;height: 360px;padding-top: 20px;clear: both;">

                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    {{ super() }}
    <script>
        $(function () {
            var bandWidth_chart = echarts.init(document.getElementById("bandWidth-echart")),
                netevent_chart = echarts.init(document.getElementById("netevent-echart")),
                eventTotal_chart = echarts.init(document.getElementById("eventTotal_echart"));


            loadNewlyData(1, 1, 1);
            function initBwEcharts(data) {
                var option1 = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: data.legendData,
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {
                                title: "图片"
                            },
                            dataView: {
                                title: "数据"
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.xAxisData
                    },
                    yAxis: {
                        type: 'value',
                        name: "(Mb/s)"
                    },
                    series: data.seriesData
                };
                bandWidth_chart = echarts.init(document.getElementById("bandWidth-echart"));
                bandWidth_chart.setOption(option1);
            }

            function initEventsKind(data) {
                var option2 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'horizontal',
                        x: 'left',
                        y: 'bottom',
                        data: data.legendData
                    },
                    series: [
                        {
                            name: '网络安全事件种类',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: data.seriesData
                        }
                    ]
                };
                netevent_chart = echarts.init(document.getElementById("netevent-echart"));
                netevent_chart.setOption(option2);
            }

            function initEventsTotal(data) {
                var option3 = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.xAxisData,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    toolbox: {
                        feature: {
                            magicType: {
                                type: ['line']
                            },
                            restore: {}
                        }
                    },
                    series: [
                        {
                            name: '三线事件数量',
                            type: 'bar',
                            barWidth: '60%',
                            data: data.seriesData
                        }
                    ]
                };
                eventTotal_chart = echarts.init(document.getElementById("eventTotal_echart"));
                eventTotal_chart.setOption(option3);
            }

            function generateDate(data) {
                var bw_xAxisData = [], bw_seriesData = [], bw_legendData = [],
                    eventkinds_legendData = [], eventkinds_seriesData = [], eventsTotal_axisData = [],
                    eventsTotal_seriesData = [],
                    legendData1 = [], legendData2 = [], flag = 0;

                //v2版本的带宽信息
                if (data.data.bandWidth) {
                    var bw_data = data.data.bandWidth;
                    var reg = /^20\d{2}\//;

                    //生成图例
                    var new_bandData = {};
                    for (var x in bw_data.idcList) {
                        for (var y in bw_data.bandData) {
                            if (bw_data.bandData[x]) {
                                new_bandData[x] = bw_data.bandData[x];
                            } else {
                                new_bandData[x] = {};
                            }
                            new_bandData[x].name = bw_data.idcList[x];
                        }
                    }
                    var h = 0;
                    for (var p in new_bandData) {
                        if (h < 3) {
                            legendData1.push(new_bandData[p].name);
                        } else {
                            legendData2.push(new_bandData[p].name);
                        }
                        var obj = {
                            id: p,
                            name: new_bandData[p].name,
                            type: "line",
                            data: []
                        };
                        for (var q in bw_data.timeList) {
                            if (new_bandData[p][bw_data.timeList[q]]) {
                                obj.data.push(new_bandData[p][bw_data.timeList[q]]);
                            } else {
                                obj.data.push(0);
                            }
                        }
                        bw_seriesData.push(obj);
                        h++;
                    }
                    bw_legendData.push({
                        data: legendData1,
                        x: "center"
                    });
                    bw_legendData.push({
                        data: legendData2,
                        x: "center",
                        y: "5%"
                    });

                    //生成xAxisData
                    for (var j = 0; j < bw_data.timeList.length; j++) {
                        bw_xAxisData.push(bw_data.timeList[j].replace(reg, ""));
                    }
                }

                //带事件种类的比例
                //判断是否为空data.data.opEvent
                if (data.data.opEvent) {
                    if (data.data.opEvent.length === 0) {
                        $("#netevent-echart").html("暂无网络事件").css({
                            "text-align": "center",
                            "font-weight": 800,
                            "line-height": "300px",
                            "color": "#ccc"
                        });
                    } else {//需要生成初始化事件种类的数据
                        for (var m = 0; m < data.data.opEvent.length; m++) {
                            var optItem = data.data.opEvent[m];
                            var opObj = {};
                            opObj.name = optItem.type;
                            opObj.value = optItem.number;
                            eventkinds_seriesData.push(opObj);
                            eventkinds_legendData.push(optItem.type);
                        }
                    }
                }


                //本月三线事件数量,至少为[{}]
                if (data.data.levelThree) {
                    var reg2 = /^20\d{2}\/0\d{1}\//, title_extra;
                    for (var t = 0; t < data.data.levelThree.timeList.length; t++) {
                        if (t === 0) {
                            title_extra = data.data.levelThree.timeList[t].substring(0, 7);
                        }
                        eventsTotal_axisData.push(data.data.levelThree.timeList[t].replace(reg2, ""));//生成时间轴
                        for (var u in data.data.levelThree.data) {
                            if (data.data.levelThree.data[data.data.levelThree.timeList[t]]) {
                                eventsTotal_seriesData.push(data.data.levelThree.data[data.data.levelThree.timeList[t]]);
                            } else {
                                eventsTotal_seriesData.push(0);
                            }
                            break;
                        }
                    }
                }
                return {
                    bw_data: {
                        legendData: bw_legendData,
                        xAxisData: bw_xAxisData,
                        seriesData: bw_seriesData
                    },
                    kind_data: {
                        legendData: eventkinds_legendData,
                        seriesData: eventkinds_seriesData
                    },
                    total_data: {
                        xAxisData: eventsTotal_axisData,
                        seriesData: eventsTotal_seriesData,
                        title: title_extra
                    }
                }
            }

            $(window).resize(function () {
                bandWidth_chart.resize();
                eventTotal_chart.resize();
                netevent_chart.resize();
            });
            //实时渲染Echarts
            var bw_timer = null, kinds_timer = null, total_timer = null;

            function loadNewlyData(bandWidth, levelThree, opEvent, timer) {
                ajaxRequestJson("GET", GLOBAL_VARIABLE.BASE_URL + "/dashboard/v2?bandWidth="+bandWidth+"&levelThree="+levelThree+"&opEvent="+opEvent, {}, function (data) {
                    var datalist = generateDate(data);
                    if (bandWidth === 1) {
                        initBwEcharts(datalist.bw_data);
                    }
                    if (levelThree === 1) {
                        initEventsTotal(datalist.total_data);
                    }
                    if (opEvent === 1) {
                        initEventsKind(datalist.kind_data);
                    }
                }, function (ero) {
                    switch (timer) {
                        case 'kinds_timer':
                            cycleKindsRefresh(false);
                            $.myAlert({title: "出错提示", message: "事件种类数据刷新失败！"});
                            $("#myonoffswitch1").prop('checked',false);
                            break;
                        case 'total_timer':
                            cycleEventTotalRefresh(false);
                            $.myAlert({title:"出错提示",message:"三线事件总数刷新失败！"});
                            $("#myonoffswitch2").prop('checked',false);
                            break;
                        case 'bw_timer':
                            cycleBandWidthRefresh(false);
                            $.myAlert({title:"出错提示",message:"7天带宽数据刷新失败！"});
                            $("#myonoffswitch3").prop('checked',false);
                            break;
                    }

                });
            }

            //三个定时器
            var cycleKindsRefresh = function (flag) {
                console.log(flag);
                if (flag === true) {
                    clearTimeout(kinds_timer);
                    kinds_timer = setTimeout(function () {
                        loadNewlyData(0, 0, 1, "kinds_timer");
                        cycleKindsRefresh(true);
                    }, 60000);
                } else {
                    clearTimeout(kinds_timer);
                    return false;
                }
            };
            var cycleEventTotalRefresh = function (flag) {
                console.log(flag);
                if (flag === true) {
                    clearTimeout(total_timer);
                    total_timer = setTimeout(function () {
                        loadNewlyData(0, 1, 0, "total_timer");
                        cycleEventTotalRefresh(true);
                    }, 60000);
                } else {
                    clearTimeout(total_timer);
                    return false;
                }
            };
            var cycleBandWidthRefresh = function (flag) {
                console.log(flag);
                if (flag === true) {
                    clearTimeout(bw_timer);
                    bw_timer = setTimeout(function () {
                        loadNewlyData(1, 0, 0, "bw_timer");
                        cycleBandWidthRefresh(true);
                    }, 60000);
                } else {
                    clearTimeout(bw_timer);
                    return false;
                }
            };
            //绑定滑动按钮
            $(".onoffswitch-checkbox").on("change", function () {
                var thisId = $(this).attr("id");
                if ($(this).prop("checked") === true) {//开启延时器
                    console.log(thisId);
                    switch (thisId) {
                        case 'myonoffswitch1'://事件种类
                            cycleKindsRefresh(true);
                            break;
                        case 'myonoffswitch2'://带宽
                            cycleBandWidthRefresh(true);
                            break;
                        case 'myonoffswitch3'://事件总数
                            cycleEventTotalRefresh(true);
                            break;
                        default:
                            break;
                    }

                } else {//清空延时器
                    switch (thisId) {
                        case 'myonoffswitch1':
                            cycleKindsRefresh(false);
                            break;
                        case 'myonoffswitch2':
                            cycleBandWidthRefresh(false);
                            break;
                        case 'myonoffswitch3':
                            cycleEventTotalRefresh(false);
                            break;
                        default:
                            break;
                    }
                }
            });

        });
    </script>
{% endblock %}